<template>
  <div>
    <slot :date="date" :week="week" :time="time">
      <span>{{ time }}</span>
    </slot>
  </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
  name: 'realtime',
  props: {
    dateFormat: { type: String, default: 'YYYY年MM月DD日' },
  },
  data() {
    return {
      date: '',
      week: '',
      time: '',
    };
  },
  created() {
    this.weekDayEnum = { 0: '星期日', 1: '星期一', 2: '星期二', 3: '星期三', 4: '星期四', 5: '星期五', 6: '星期六' };
    this.timer = setInterval(() => {
      const M = dayjs();
      this.date = M.format(this.dateFormat);
      this.week = this.weekDayEnum[M.day()];
      this.time = M.format('HH:mm');
    }, 1000);
  },
  unmounted() {
    clearInterval(this.timer);
  },
};
</script>

<style scoped></style>
